<template>
    <div>
        <ApplicationForm :applyNo="applyNo" @getDetailsApplyNo="getDetailsApplyNo"
                         ref="ruleForm" :editData="editData" />
        <el-tabs style="background: #fff;margin-top: 10px;" v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="搜索" name="search">
                <div slot="label" class="btnBox">
                    <div class="imgBox">
                        <img :src="searchUrl" alt="search">
                    </div>
                    <div class="btnText">
                        <span>搜索</span>
                        <span>Search</span>
                    </div>
                </div>
                <SearchList :applyId="applyId" @getMaterialTotal="getMaterialTotal" />
            </el-tab-pane>
            <el-tab-pane label="常用物料" name="material">
                <div slot="label" class="btnBox">
                    <div class="imgBox">
                        <img :src="materialUrl" alt="search">
                    </div>
                    <div class="btnText">
                        <span>常用物料</span>
                        <span>Material</span>
                    </div>
                </div>
                <MaterialList :applyId="applyId" @getMaterialTotal="getMaterialTotal" />
            </el-tab-pane>
            <el-tab-pane label="申请单" name="application">
                <div slot="label" class="btnBox">
                    <div class="imgBox">
                        <img :src="applicationUrl" alt="search">
                    </div>
                    <div class="btnText">
                        <span>申请单</span>
                        <span>Application</span>
                    </div>
                    <el-badge :value="applyTotal" v-if="applyTotal !== 0"></el-badge>
                </div>
                <ApplicationList :applyId="applyId"  :applyNo="applyNo" @resetFormData="resetFormData"
                                 @getApplyNo="getApplyNo" @tabInit="tabInit" @getMaterialTotal="getMaterialTotal" />
            </el-tab-pane>
            <el-tab-pane label="常用物料单" name="billMaterials">
                <div slot="label" class="btnBox">
                    <div class="imgBox">
                        <img :src="billMaterialsUrl" alt="search">
                    </div>
                    <div class="btnText">
                        <span>常用物料单</span>
                        <span>Bill of Materials</span>
                    </div>
                </div>
                <MaterialBillList :applyId="applyId" @getMaterialTotal="getMaterialTotal" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import ApplicationForm from './ApplicationForm';
import SearchList from './SearchList';
import MaterialList from './MaterialList';
import ApplicationList from './ApplicationList';
import MaterialBillList from './MaterialBillList';
import { applyGetApplyNo, materialTotal } from "../../../components/axios/url";
import http from "../../../components/axios/fetch";
import bus, {TYPES} from '../../common/bus'

    export default {
        components: {
            ApplicationForm,
            SearchList,
            MaterialList,
            ApplicationList,
            MaterialBillList,
        },
        data() {
            return {
                activeName: 'search',
                searchUrl: require('../../../assets/images/search-btn.png'),
                materialUrl: require('../../../assets/images/common.png'),
                applicationUrl: require('../../../assets/images/shopping_cart.png'),
                billMaterialsUrl: require('../../../assets/images/material_sheet.png'),
                applyId: '',
                applyNo: '',
                applyTotal: 0,
                modeType: this.$route.query ? this.$route.query.modeType : null,
                editData: {},
            }
        },
        created() {
            if(this.$route.query && this.$route.query.modeType !== 'edit') {
                this.getApplyNo(); // 非编辑状态下调用创建新单接口
            }
        },
        methods: {
            getApplyNo() {  // 创建新单
                http.post(applyGetApplyNo).then(res => {
                    if(res.data && res.data.resultMess === "success") {
                        this.applyId = res.data.data.applyId;
                        this.applyNo = res.data.data.applyNo;
                    }
                    this.getMaterialTotal();
                }).catch((error) => {
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                })
            },
            getDetailsApplyNo(data) {  // 编辑是更新 申请单号 ID
                this.applyId = data.applyId;
                this.applyNo = data.applyNo;
                this.getMaterialTotal();
            },
            getMaterialTotal() { // 申请单数量监听
                http.post(materialTotal, {applyId: this.applyId}).then(res => {
                    if(res.data && res.data.resultMess === "success") {
                        this.applyTotal = res.data.data ? res.data.data.total : 0
                    }
                }).catch((error) => {
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                })
            },
            handleTabClick(tab) {
                bus.$emit(TYPES.tabType, tab.name);
            },
            tabInit() { // 提交完初始化Tab 值
                this.activeName =  'search';
            },
            resetFormData() { // 清空表头数据
                this.$refs.ruleForm.resetForm()
            }
        }
    }

</script>


<style scoped>
.btnBox{
    display: flex;
    padding: 0 20px;
}
.imgBox{
    width: 40px;
    height: 40px;
    padding-top: 10px;
}
.imgBox img{
    width: 100%;
    height: 100%;
}
.btnText{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    padding-top: 10px;
}
.btnText span{
    font-size: 16px;
    line-height: 20px;
}
</style>
